<template>
  <div>
    <a-modal
      title="服务商产品分类编辑"
      v-model="addData.show"
      width="500px"
      style="overflow:hidden"
      @cancel="handleClose"
    >
      <div slot="title">
        <span>{{addData.title}}</span>
      </div>
      
          <el-form
            :model="parames"
            :rules="rules"
            label-position="left"
            ref="parames"
            label-width="94px"
            class="addForm"
            size="small"
          >
            <el-row :gutter="40" style="padding: 30px 30px">
                <el-col :span="24">
                <el-form-item label="选择服务商:" prop="providerId">
                  <el-select style="width:100%" size="small" v-model="parames.providerId">
                    <el-option v-for="(item,index) in providerData" :key="index" :label="item.providerName" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col> 
              <el-col :span="24">
                <el-form-item label="选择产品:" prop="productTypeId">
                  <el-select style="width:100%" size="small" v-model="parames.productTypeId">
                    <el-option v-for="(item,index) in productTypeData" :key="index" :label="item.typeName" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col> 
            </el-row>
          </el-form>
          <template slot="footer">
            <el-button size="small" :loading="loadingBtn" type="primary" @click="handleSend">保存</el-button>
            <el-button size="small" @click="handleClose">取消</el-button>
          </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  props: ["addData"],
  data() {
    return {
      loadingBtn: false,
      productTypeData: [],
      providerData: [],
      parames: {
        id: '',
        productTypeId: '', //产品id
        providerId: '', //服务商id
      },
      menuType: [],
      rules: {
        providerId: [
          { required: true, message: "必填", trigger: "blur" },
        ],
        productTypeId: [
          { required: true, message: "必填", trigger: "blur" },
        ]
      },
    };
  },
  mounted() {},
  methods: {

    handleClose() {
      //关闭弹窗
      this.addData.show = false;
    },
    handleSend () { //提交信息
      this.$refs['parames'].validate((valid) => {
        if (valid) {
          this.loadingBtn = true
          if (this.addData.type == 'new') {
            this.$post(this.$api.postProviderProductTypeAdd,this.parames).then(response => {
              if (response.data.succeed) {
                this.$emit('checkRender')
                this.handleClose()
              }
            })
          } else if (this.addData.type == 'edit') { //添加子菜单或功能项
            this.$post(this.$api.postProviderProductTypeEdit,this.parames).then(response => {
              if (response.data.succeed) {
                this.$emit('checkRender')
                this.handleClose()
              }
            })
          }
          setTimeout(() => {
            this.loadingBtn = false
          }, 300);
        }
      })
    },
    render () {
        this.$post(this.$api.postBaseInfoProductTypeList).then(response => { //查询所有产品类型
            if (response.data.succeed) {
                this.productTypeData = response.data.data
            }
        })
        this.$post(this.$api.postProviderList).then(response => { //查询所有服务商
            if (response.data.succeed) {
                this.providerData = response.data.data
            }
        })
        if (this.addData.type == 'edit') {
            this.parames.id = this.addData.id
            this.parames.productTypeId = this.addData.productTypeId
            this.parames.providerId = this.addData.providerId
        }
    },
    restData () {
        this.parames.id = ""
        this.parames.productTypeId = ""
        this.parames.providerId = ''
        this.$refs.parames.resetFields()
    }
  },
  computed: { //计算属性
    changeDialog () {
      return this.addData.show
    }
  },
  watch: {
    changeDialog: {
      handler (curVal, oldVal) {
        if (curVal) {
          this.$utils.getEnumberation('postProviderMenuMenuType','menuType',this) //菜单类型
          this.render()
        } else {
          this.restData()
        }
      }
    },
    deep: true
  }
};
</script>

<style scoped>
</style>
